<html>
<head>
<style>

#NewCustomerCheckoutButton {
-webkit-appearance: none;
-webkit-box-align: center;
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 1px 2px 0px;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-attachment: scroll;
background-clip: border-box;
background-color: hsla(0, 0%, 0%, 0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(237, 157, 75)), to(rgb(210, 105, 41)));
background-origin: padding-box;
border-bottom-color: white;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-top-style: none;
border-top-width: 0px;
box-shadow: rgba(0, 0, 0, 0.199219) 0px 1px 2px 0px;
box-sizing: border-box;
color: white;
cursor: pointer;
display: inline-block;
float: none;
font-family: Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 45px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 2%;
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
outline-color: white;
outline-style: none;
outline-width: 0px;
padding-bottom: 11px;
padding-left: 15px;
padding-right: 15px;
padding-top: 11px;
text-align: center;
text-decoration: none;
text-indent: 0px;
text-shadow: none;
text-transform: none;
vertical-align: baseline;
white-space: pre;
width: /*96%*/90%;
word-spacing: 0px;
}
</style>
<script type='text/javascript' src='https://wallet.sandbox.google.com/online/merchant/merchant.js'></script>
<script type='text/javascript'>

var buttonSizes = {
  '768': 'custom_768x67',
  '718': 'custom_718x67',
  '432': 'custom_432x67',
  '288': 'custom_288x46',
  //'576': 'custom_576x92',
  //'864': 'custom_864x138'
};

var jwt= 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI3NTUzNjQ1OTc3Nzg5MDc5NjgzIiwiaWF0IjoxMzE5MjI5Nzc3LCJhdWQiOiJHb29nbGUiLCJ0eXAiOiJnb29nbGUvcGF5bWVudGV4cHJlc3MvdjEvbWFza2VkL3JlcXVlc3QiLCJzZWxlY3RvcnMiOnsicGF5Ijp7InR5cGUiOiJQQVlNRU5UX0lOU1RSVU1FTlQifX19.YT-x8dXQg6fc1KsnlUmLsE-B6_C7APSjGDnsnq-9ep0';

function insertButton(jwt){
  var width = determineSize();
  var bSize = getButtonSize(width);
  
  var content = '<g:wallet id="submit" jwt="' + jwt + '" mode="useDefaults" onsuccess="handleMaskedWalletSignIn(jwt)" onfailure="failureGettingMaskedWallet(error)" buttonStyle="' + bSize + '" />';
  document.getElementById('walletDiv').innerHTML = content;
  
  /*
  var scriptNode = document.createElement('script');
  scriptNode.type = 'text/javascript';
  scriptNode.src = 'https://wallet.sandbox.google.com/online/merchant/merchant.js';
  
  var head = document.getElementsByTagName('head');
  if (head[0] != null)
    head[0].appendChild(scriptNode);
  */
}


function determineSize(){
  var button = document.getElementById('NewCustomerCheckoutButton');
  var width = window.getComputedStyle(button,null).width;
  return width;
}

function getButtonSize(width){
  var previous='768';
  for (var size in buttonSizes){
    if(parseInt(size) > parseInt(width))
      return buttonSizes[previous];
    previous = size;
  }
  return buttonSizes[previous];
}

window.onload = function(){
  insertButton(jwt);
}

</script>

</head>
<body>
<input type="submit" name="NewCustomerCheckoutButton" value="Next" id="NewCustomerCheckoutButton" class="button orange">
<div id='walletDiv'></div>

</body>
</html>

